<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=1024"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <title>个人介绍</title>
    <link href="../css/demo2/impress.css" rel="stylesheet"/>
    <script src="../js/jquery.min.js"></script>
</head>
<!-- 这是一个基于impress官方demo修改的作品 -->
<body class="impress-not-supported">
<!-- 若初始化失败，说明浏览器不支持，会看到这段话，因为这段话在初始化成功后会被隐藏，通常看不到。 -->
<div class="fallback-message">
    <p>如果说你可以看到这句话，那么说明你的浏览器还不是最新的高级货，不支持新版的浏览器脚本！</p>
    <p>赶快去下载一个高级货~ 比如<b>Chrome</b>, <b>Safari</b> 或者 <b>Firefox</b>吧</p>
</div>
<!-- 正式开始 -->
<div id="impress" data-autoplay="7">
    <div id="bored" class="step slide" data-x="-1000" data-y="-1500" data-autoplay="10">
        <q>
            <font color="84C1FF">Boy</font> <font color="E6CAFF">boy</font> = <font color="ff7575">new</font> <font
                color="84C1FF">Boy()</font>;
            <br>
            <font color="E6CAFF">boy</font>.<font color="ACD6FF">name</font> = <font color="E0E0E0">"dancer"</font>;
            <br>
            <font color="E6CAFF">boy</font>.<font color="ACD6FF">age</font> = <font color="FFAF60">25</font>;
            <br>
            <font color="E6CAFF">boy</font>.<font color="ACD6FF">setIQ</font>(<font color="FFAF60">120</font>);
            <br>
            <font color="E6CAFF">boy</font>.<font color="ACD6FF">setMarriage</font>(<font color="CE0000">"单身"</font>);
            <br><br>
            <font color="CE0000">小目标 : 先挣它一个亿</font>
        </q>
    </div>
    <!--     <div class="step slide" data-x="0" data-y="-1500">
            <q>你是否也认为在<strong>现代浏览器</strong>里，表现形式<strong>不应该</strong>受‘传统’的幻灯片模式的<strong>限制</strong>？</q>
        </div>
        <div class="step slide" data-x="1000" data-y="-1500">
            <q>你是否希望让你的演讲以<strong>令人震撼</strong>的视觉效果来<strong>打动你的观众</strong>？</q>
        </div> -->
    <div id="title" class="step" data-x="0" data-y="0" data-scale="4">
        <span class="try">你好,我是</span>
        <h1>刘晓斌</h1>
        <span>一个要成为海贼王的男人</span>
    </div>
    <div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
        <p>
            星座 <strong>射手</strong>
            <br>
            职业 <strong>程序员</strong>
            <br>
            <span class="footnote">不是 修电脑！</span>
            <br>
            爱好：养<strong>花</strong>种<strong>草</strong>，撸<strong>猫</strong>溜<strong>狗</strong>
            <br>
            <strong>Life is wonderful</strong>
        </p>
    </div>
    <div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6">
        <p>总是向往平<b>淡</b> <span class="thoughts">却</span>又不甘平凡</p>
    </div>
    <div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
        <p>一边疯狂的熬夜<br>
            <b>一边佛系的养生</b>
        </p>
    </div>
    <div id="ing" class="step" data-x="3500" data-y="-850" data-z="0" data-rotate="270" data-scale="6">
        <p>爱好<br> <b class="positioning">多的像</b> <b class="rotating">星星</b>, <b class="scaling">但真正为之花的时间</b> 少之又少</p>
    </div>
    <div id="imagination" class="step" data-x="6700" data-y="-300" data-scale="6">
        <p>以前老安慰自己是因为没人陪 <br>后来发现是因为 <b class="imagination">懒！</b></p>
        <p>想法的巨人，行动的矮子。</p>
    </div>
    <div id="source" class="step" data-x="6300" data-y="3000" data-rotate="20" data-scale="4">
        <p>懒癌佛系宅男，了解一下？</p>
        <q>QQ：1139004746</q>
        <img src="../img/qq.jpg">
    </div>
    <div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2">
        <p>哦、对了...</p>
    </div>
    <div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10"
         data-scale="2">
        <p><span class="have">想知道</span><span class="you">这个</span><span class="noticed">页面</span><span
                class="its">是</span> <span class="in">怎么弄出来的吗？</span></p>
        <!--源码地址： <a href="https://github.com/impress/impress.js" target="_blank"></a> -->
        <span class="footnote">加我我告诉你</span>
    </div>
    <div id="overview" class="step" data-x="3000" data-y="1500" data-z="0" data-scale="10">
    </div>
</div>

<%--<div id="goNext"
     style="right: 10%;bottom: 10%;position: absolute;background-color: #000000;opacity: 0.3;z-index: 1000;cursor:pointer;"
     onclick="goNext()">
    <span id="spanNext" style="font-size: 250%;color: #FFFFFF;opacity: 0.8;margin: 20px">下一页</span>
</div>
<div id="goPrev"
     style="left: 10%;bottom: 10%;position: absolute;background-color: #000000;opacity: 0.3;z-index: 1000;cursor:pointer;"
     onclick="goPrev()">
    <span id="spanPrev" style="font-size: 250%;color: #FFFFFF;opacity: 0.8;margin: 20px">上一页</span>
</div>--%>


<div id="impress-toolbar"></div>
 <div class="hint">
    <p>键盘 '空格' 或 方向'←''→'切换.</p>
</div>
<%--<script>
    if ("ontouchstart" in document.documentElement) {
        // document.querySelector(".hint").innerHTML = "<p>单击切换下一张</p>";
    }
</script>--%>
<!-- 先引入然后初始化 -->
<script src="../js/demo2/impress.js"></script>

<script>
    // 初始化
    impress().init();
    // //单击切换下一张
    // document.addEventListener('click', function(){
    //    next();
    // })


</script>
</body>
</html>